<template>
    <div class="tools w-fit flex items-center">
        <div class="mr-3 cursor-pointer flex items-center" v-for="(item, index) in TOOLS_LIST" :key="item.name">
            <el-tooltip :effect="themeStore.layoutColorMode === 2 ? 'light' : 'dark'" :content="item.name"
                placement="top-start">
                <el-icon size="17" v-if="item.name !== '密度'" @click="TOOL_FUNCTION_MAP[index as number]">
                    <component :is="item.icon" />
                </el-icon>
                <el-dropdown v-else trigger="click" popper-class="dropdown" :teleported="false">
                    <el-icon size="17" :color="themeStore.layoutColor.mTextColor">
                        <component :is="item.icon" />
                    </el-icon>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item :class="{ 'is-active': size.value === tableSize }"
                                v-for="size in TABLE_SIZE_MAP" :key="size.value"
                                @click="setTableSize(size.value as HTABLE.TableSize)">
                                {{ size.name }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-tooltip>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { useThemeStore } from '@/stores';
import { computed } from 'vue';
const themeStore = useThemeStore()
const TOOLS_LIST = computed(() => {
    return [
        {
            icon: 'Refresh',
            name: '刷新'
        },
        {
            icon: 'Search',
            name: `${props.isHideSearch ? '显示' : '隐藏'}筛选`
        }, {
            icon: 'Rank',
            name: '密度'
        }
    ]
})
const TABLE_SIZE_MAP = [
    {
        name: '默认',
        value: 'default'
    },
    {
        name: '紧凑',
        value: 'small'
    },
    {
        name: '宽松',
        value: 'large'
    }
]
const props = defineProps({
    tableSize: {
        type: String,
        default: ''
    },
    isHideSearch: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['update:tableSize', 'update:isHideSearch', 'refresh'])
const setTableSize = (size: HTABLE.TableSize) => {
    emit('update:tableSize', size)
}
const TOOL_FUNCTION_MAP: HTABLE.ToolFunctionMap = {
    0: () => {
        emit('refresh')
    },
    1: () => {
        emit('update:isHideSearch', !props.isHideSearch)
    }
}
</script>
<style lang="less">
.tools {
    color: var(--main-text-color)
}

.dropdown {
    --el-bg-color-overlay: var(--head-tab-bg-color);
    --el-color-primary: var(--theme-color);
    --el-text-color: var(--main-text-color);
    --el-text-color-regular: var(--main-text-color);

    &.is-hovering {
        background-color: var(--theme-hover-color) !important;
    }

    .is-active {
        background-color: var(--theme-hover-color);
        color: var(--theme-color);
    }
}
</style>